import { OPERATIONS } from "@/access";
import HasOperation from "@/components/bases/hasOperation/hasOperation";
import { useHasOperation } from "@/hooks/auth";
import { API } from "@/services/ant-design-pro/typings";
import { getFetchImageUrl } from "@/services/api";
import { copyToClipboard } from "@/utils";
import { Button, Image, message } from "antd";
import { HTMLAttributes, ReactElement } from "react";
import css from "./ImageCard.module.scss";
type ImageCardProps = HTMLAttributes<HTMLDivElement> & {
  photo: API.FetchPhotosResponse;
  onDelete: () => void;
};
export default function ImageCard(props: ImageCardProps): ReactElement {
  const { photo, onDelete, ...rest } = props;
  const url = getFetchImageUrl(photo);
  const onCopy = () => {
    copyToClipboard(url);
    message.success("复制成功");
  };

  const hasCreateOperation = useHasOperation(OPERATIONS.DELETE);

  return (
    <div className={`${rest.className ?? ""} ${css.imageCard}`} {...rest}>
      <Image
        width="100%"
        height={100}
        src={url}
        alt={photo.fileName}
        fallback=""
      />
      <HasOperation operation={OPERATIONS.DELETE}>
        <Button
          disabled={!hasCreateOperation}
          onClick={onDelete}
          type="primary"
          size="small"
          danger
        >
          删除
        </Button>
      </HasOperation>
      <Button className="copy" onClick={onCopy} type="primary" size="small">
        复制地址
      </Button>
    </div>
  );
}
